import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { FreeBox } from '@/../packages';

export default defineComponent({
    setup() {
        const state = reactive({
            height: 100,
            width: 100,
        });

        // setTimeout(() => {
        //     state.height = 300
        //     state.width = 300
        // }, 1000);

        return () => (<div class={styles.container}>
            <div class={styles.left}>
            </div>
            <div class={styles.right}>
                <FreeBox fixed={false}>{{
                    default: () => <div class={styles['flex-center']}>absolute</div>
                }}</FreeBox>
            </div>
            <FreeBox fixed={true} height={state.height} width={state.width}>{{
                default: () => <div class={styles['flex-center']}>fixed</div>
            }}</FreeBox>
        </div>)
    }
})